<template>
  <div class="user">
    <pageTable :data="data" :defaultTable="false" class="user-table" @sizeChange="sizeChange">
    <searchForm slot="top-content" @search="toSearch">
      <a-input slot="userName" lable="登录名" v-model="search.condition.userName" />
      <a-input slot="realName" lable="真实名" v-model="search.condition.realName" />
      <a-input slot="nickName" lable="昵称" v-model="search.condition.nickName" />
    </searchForm>
    <a-button slot="top-content" type="primary" icon="plus-circle" @click="addUser(null)">新增</a-button>
    <a-table slot="table-conten" :dataSource="data.records" :columns="cols" bordered :pagination="false">
      <template slot="operation" slot-scope="text, record">
        <a-tooltip placement="top">
          <template slot="title">
            <span>编辑</span>
          </template>
          <a-icon type="form" @click="addUser(record)" class="opera"/>
        </a-tooltip>
        <a-tooltip placement="top">
          <template slot="title">
            <span>设置菜单</span>
          </template>
          <a-icon type="star" @click="setMenu(record)" class="opera"/>
        </a-tooltip>
        <a-tooltip placement="top">
          <template slot="title">
            <span>设置角色</span>
          </template>
          <a-icon type="appstore" @click="setRole(record.id)" class="opera"/>
        </a-tooltip>
      </template>
      <template slot="imgFile" slot-scope="text">
        <a-tooltip placement="top">
         <template slot="title">
            <span><img :src="text?text:''"/></span>
          </template>
          <a-icon type="file-image" @click="findImg(text)"/>
          </a-tooltip>
      </template>
    </a-table>
  </pageTable>
  <userEdit ref="userEdit"/>
  <menuEdit ref="menuEdit"/>
  <setRole ref="setRole" />
  </div>
</template>

<script>
import pageTable from "@/syscomponents/pageTable.vue";
import searchForm from "@/syscomponents/searchForm";
import setRole from './setRole'
import userEdit from "./edit"
import menuEdit from "./setMnue"
import {userState} from './userData'
import { page } from "./api";
const cols = [
        {
          title: "姓名",
          dataIndex: "realName"
        },
        {
          title: "昵称",
          dataIndex: "nickName"
        },
        {
          title:'头像',
          dataIndex:"actor",
          scopedSlots: { customRender: "imgFile" }
        },
        {
          title: "登录名",
          dataIndex: "userAcount"
        },
        {
          title: "电话",
          dataIndex: "phone"
        },
        {
          title: "性别",
          dataIndex: "sex"
        },
        {
          title: "身份证号",
          dataIndex: "idNumber"
        },
        {
          title: "邮箱",
          dataIndex: "email"
        },
        {
          title: "状态",
          dataIndex: "state",
          customRender:(text, row, index)=>{
            return userState[text]
          }
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" }
        }
      ];
export default {
  components: { pageTable, searchForm,userEdit,menuEdit,setRole },
  data() {
    return {
      cols,
      data: {records:[]},
      search: {
        perPageCount: 10,
        currentPage: 1,
        orders: [{ column: "createTime" }],
        condition: {}
      }
    };
  },
  mounted() {
    this.page();
  },
  methods: {
    setRole(id){
      this.$refs.setRole.showModal(id)
    },
    toSearch() {
      this.page();
    },
    sizeChange(current,size){
      this.search.perPageCount=size
      this.search.currentPage = current
      this.page()
    },
    page() {
      page(this.search).then(v => {
        if (v.ok) {
          this.data = v.data;
        } else {
          this.$message.error(v.msg || "操作失败");
        }
      });
    },
    addUser(record){
      this.$refs.userEdit.showModal(record,record==null)
    },
    setMenu(record){
      this.$refs.menuEdit.showModal(record.id)
    }
  }
};
</script>

<style>
.user-table .opera{
  margin-right: 15px;
}
</style>